<template>
  <div>
    <el-dialog v-model="visible" :show-close="false" width="700">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">
            {{ formData.id ? '编辑' : '创建' }}用户
          </h4>
        </div>
      </template>

      <div>
        <el-form :model="formData" label-width="120px" ref="elFormRef">
          <el-form-item label="业务员昵称" prop="user_name">
            <el-input v-model="formData.user_name" size="large" placeholder="请输入用户名" />
          </el-form-item>

          <el-form-item label="密码" prop="pwd">
            <el-input v-model="formData.pwd" size="large" type="password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label="上级ID" prop="agent_id">
            <el-input v-model="formData.agent_id" />
          </el-form-item>

          <el-form-item label="用户类型" prop="classId">
            <Select v-model="formData.classId" :data="userTypeDatass" />
          </el-form-item>

          <el-form-item label="账号" prop="phone">
            <el-input v-model="formData.phone" size="large" placeholder="账号(纯数字6-11位)" />
          </el-form-item>

          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="formData.email" size="large" placeholder="请输入电子邮箱" />
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <Select v-model="formData.status" :data="userStatusData" />
          </el-form-item>
          <el-form-item label="USDT提现地址" prop="status">
            <el-input v-model="formData.address_usdt" type="textarea" />
          </el-form-item>
          <el-form-item label="paypal提现地址" prop="status">
            <el-input v-model="formData.address_paypal"  type="textarea"/>
          </el-form-item>
<!--          <el-form-item label="状态" prop="status">-->
<!--            <Select v-model="formData.status" :data="userStatusData" />-->
<!--          </el-form-item>-->
          <el-form-item label="备注信息" prop="remarks">
            <el-input v-model="formData.remarks" size="large" type="textarea" placeholder="请输入备注信息" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">关闭</el-button>

          <el-button type="primary" @click="handleSubmit">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { ref, watch, onMounted } from 'vue'
import { UserAddAndEdit } from '@/api/index'
import { ElMessage } from 'element-plus'
import Select from '@/components/admin/Select.vue'
const userTypeDatass = [
  { label: '区域代理', value: 1 },
  { label: '业务员', value: 3 },
  { label: '普通用户', value: 0 }
]
const props = defineProps({
  userTypeData: {
    type: Object,
    default: () => ({})
  },

  userStatusData: {
    type: Object,
    default: () => ({})
  }
})

const visible = ref(false)

const elFormRef = ref(null)

const open = (config) => {
  Object.assign(formData.value, config.data)

  visible.value = true
}

const close = () => {
  visible.value = false
}

watch(() => visible.value, (newVal) => {
  if (newVal == false) {
    elFormRef.value.resetFields()
  }
})

const formData = ref({
  id: '',
  user_name: '',
  pwd: '',
  classId: '',
  phone: '',
  email: '',
  status: '',
  remarks: '',
  agent_id: '',
  method: 'add'
})

const handleSubmit = async () => {

  try {
    formData.value.method = formData.value.id ? 'edit' : 'add'

    const res = await UserAddAndEdit(formData.value)

    elFormRef.value.resetFields()

    ElMessage({
      message: `用户${formData.value.id ? '编辑' : '创建'}成功!`,
      type: 'success'
    })
  if (!formData.value.id){
    location.reload();
  }

    emit('reload')
    close()
  } catch (err) {
    //console.log('handleSubmit', err)

    elFormRef.value.resetFields()

    ElMessage({
      message: err.msg,
      type: 'error'
    })
  }
}

// 暴露方法给父组件
defineExpose({
  open
});

const emit = defineEmits(['reload'])

onMounted(() => {
  // open()
})
</script>

<style lang='scss' scoped></style>
